<template>
  <div class="reminder-view-content">
    <!-- 提醒列表和添加按钮区域 -->
    <div class="reminder-container">
      <div class="reminder-header">
        <h2>定时提醒</h2>
        <button @click="showAddReminderDialog" class="add-button">
          <span class="add-icon">+</span> 添加提醒
        </button>
      </div>

      <!-- 提醒列表 -->
      <div class="reminders-list">
        <h3>已设置的提醒</h3>
        <div v-if="isLoading" class="loading-message">加载提醒数据中...</div>
        <div v-else-if="reminders.length === 0" class="empty-list-message">
          暂无提醒，请添加新的提醒
        </div>
        <ul v-else class="reminder-list">
          <li v-for="reminder in reminders" :key="reminder.id" class="reminder-item">
            <div class="reminder-content">
              <div class="reminder-header">
                <h4 class="reminder-title" :title="reminder.title">{{ reminder.title }}</h4>
                <span class="reminder-time">{{ formatTime(reminder.reminderTime) }}</span>
              </div>
              <p class="reminder-description" v-if="reminder.description" :title="reminder.description">{{ reminder.description }}</p>
              <div class="reminder-details">
                <span class="reminder-recurrence" :title="getRecurrenceText(reminder)">{{ getRecurrenceText(reminder) }}</span>
                <span class="reminder-next" :title="'下次提醒: ' + formatDate(reminder.nextTriggerTimestamp)">下次提醒: {{ formatDate(reminder.nextTriggerTimestamp) }}</span>
                <span class="reminder-status" :class="{ 'active': reminder.isActive }" :title="reminder.isActive ? '当前状态: 已启用' : '当前状态: 已禁用'">
                  {{ reminder.isActive ? '已启用' : '已禁用' }}
                </span>
              </div>
            </div>
            <div class="reminder-actions">
              <button @click="toggleReminderActive(reminder)" class="toggle-button" :title="reminder.isActive ? '禁用此提醒' : '启用此提醒'">
                {{ reminder.isActive ? '禁用' : '启用' }}
              </button>
              <button @click="editReminder(reminder)" class="edit-button" title="编辑此提醒的标题、描述、时间和重复方式">编辑</button>
              <button @click="deleteReminder(reminder.id)" class="delete-button" title="永久删除此提醒">删除</button>
            </div>
          </li>
        </ul>
      </div>
    </div>

    <!-- 提醒表单弹窗 -->
    <div v-if="isDialogVisible" class="reminder-dialog-overlay" @click.self="cancelDialog">
      <div class="reminder-dialog">
        <div class="dialog-header">
          <h3>{{ isEditing ? '编辑提醒' : '添加新提醒' }}</h3>
          <button @click="cancelDialog" class="close-button">&times;</button>
        </div>
        <!-- 添加提醒表单 -->
        <div class="add-reminder-form">
          <div class="form-group">
            <label for="reminder-title">标题</label>
            <input type="text" id="reminder-title" v-model="newReminder.title" placeholder="提醒标题...">
          </div>

          <div class="form-group">
            <label for="reminder-description">描述</label>
            <textarea id="reminder-description" v-model="newReminder.description" placeholder="提醒描述..."></textarea>
          </div>

          <div class="form-row">
            <div class="form-group time-group">
              <label>提醒时间</label>
              <div class="time-picker">
                <input 
                  type="time" 
                  v-model="newReminder.reminderTime" 
                  placeholder="时:分"
                  title="请选择时间（时:分）"
                >
              </div>
            </div>
            
            <div class="form-group date-group">
              <label>开始日期</label>
              <div class="date-input-wrapper" @click="openDatePicker">
                <input 
                  type="date" 
                  v-model="newReminder.startDate" 
                  :min="getTodayFormatted()"
                  placeholder="年-月-日"
                  title="请选择日期（年-月-日）"
                  ref="dateInput"
                >
              </div>
            </div>
          </div>

          <div class="form-group">
            <label>重复方式</label>
            <div class="recurrence-options">
              <label class="radio-label">
                <input type="radio" v-model="newReminder.recurrenceType" value="ONCE">
                单次
              </label>
              <label class="radio-label">
                <input type="radio" v-model="newReminder.recurrenceType" value="DAILY">
                每天
              </label>
              <label class="radio-label">
                <input type="radio" v-model="newReminder.recurrenceType" value="WEEKLY">
                每周
              </label>
              <label class="radio-label">
                <input type="radio" v-model="newReminder.recurrenceType" value="MONTHLY_BY_DATE">
                每月(按日期)
              </label>
            </div>
          </div>

          <!-- 每周选项 -->
          <div v-if="newReminder.recurrenceType === 'WEEKLY'" class="form-group">
            <label>选择星期</label>
            <div class="days-of-week">
              <label v-for="day in daysOfWeek" :key="day.value" class="day-checkbox">
                <input type="checkbox" v-model="selectedDaysOfWeek" :value="day.value">
                {{ day.label }}
              </label>
            </div>
          </div>

          <div class="form-actions">
            <button @click="saveReminder" class="save-button" :disabled="!isValidReminder">
              {{ isEditing ? '保存更改' : '添加提醒' }}
            </button>
            <button @click="cancelDialog" class="cancel-button">
              取消
            </button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex';

export default {
  name: 'ReminderView',
  data() {
    return {
      // 新提醒的默认值
      newReminder: {
        title: '',
        description: '',
        reminderTime: this.getCurrentTime(), // 默认为当前时间，精确到分钟
        recurrenceType: 'ONCE',
        recurrenceDetails: {},
        startDate: this.getTodayFormatted(),
        isActive: true
      },
      isEditing: false,
      editingReminderId: null,
      selectedDaysOfWeek: [], // 存储选中的星期几 [0,1,2,...]
      isLoading: true,
      isDialogVisible: false, // 控制弹窗显示
      // 星期几选项
      daysOfWeek: [
        { value: 0, label: '日' },
        { value: 1, label: '一' },
        { value: 2, label: '二' },
        { value: 3, label: '三' },
        { value: 4, label: '四' },
        { value: 5, label: '五' },
        { value: 6, label: '六' }
      ]
    };
  },
  computed: {
    ...mapGetters([
      'getAllReminders'
    ]),
    reminders() {
      // 从Vuex获取提醒列表并按下次触发时间排序
      return this.getAllReminders.sort((a, b) => {
        // 将活跃的提醒排在前面
        if (a.isActive !== b.isActive) {
          return a.isActive ? -1 : 1;
        }
        // 然后按下次触发时间排序
        return a.nextTriggerTimestamp - b.nextTriggerTimestamp;
      });
    },
    isValidReminder() {
      // 验证提醒是否有效
      const { title, reminderTime, startDate, recurrenceType } = this.newReminder;
      if (!title || !reminderTime || !startDate) return false;
      
      // 如果是每周重复，至少选择一天
      if (recurrenceType === 'WEEKLY' && this.selectedDaysOfWeek.length === 0) {
        return false;
      }
      
      return true;
    }
  },
  methods: {
    ...mapActions([
      'fetchAllReminders',
      'createNewReminder',
      'updateExistingReminder',
      'deleteExistingReminder',
      'toggleReminderActiveStatus'
    ]),
    getTodayFormatted() {
      // 获取今天的日期，格式为YYYY-MM-DD
      const today = new Date();
      const year = today.getFullYear();
      const month = String(today.getMonth() + 1).padStart(2, '0');
      const day = String(today.getDate()).padStart(2, '0');
      return `${year}-${month}-${day}`;
    },
    // 显示添加提醒弹窗
    showAddReminderDialog() {
      this.resetForm();
      this.isDialogVisible = true;
    },
    // 关闭弹窗
    cancelDialog() {
      this.isDialogVisible = false;
    },
    async saveReminder() {
      if (!this.isValidReminder) return;

      // 准备保存的提醒数据
      const reminderToSave = { ...this.newReminder };
      
      // 处理重复详情
      if (reminderToSave.recurrenceType === 'WEEKLY') {
        reminderToSave.recurrenceDetails = {
          daysOfWeek: [...this.selectedDaysOfWeek]
        };
      } else if (reminderToSave.recurrenceType === 'MONTHLY_BY_DATE') {
        const startDate = new Date(reminderToSave.startDate);
        reminderToSave.recurrenceDetails = {
          dayOfMonth: startDate.getDate()
        };
      } else {
        reminderToSave.recurrenceDetails = {};
      }

      // 检查开始时间是否为过去时间，如果是则调整为下一个有效时间
      const adjustedDate = this.adjustPastDate(
        reminderToSave.startDate, 
        reminderToSave.reminderTime, 
        reminderToSave.recurrenceType, 
        reminderToSave.recurrenceDetails
      );

      if (adjustedDate) {
        console.log('提醒时间已过期，已自动调整为下一个有效时间:', 
          `${reminderToSave.startDate} → ${adjustedDate.toISOString().split('T')[0]}`);
        reminderToSave.startDate = adjustedDate.toISOString().split('T')[0];
      }

      try {
        if (this.isEditing) {
          // 更新现有的提醒
          await this.updateExistingReminder({
            ...reminderToSave,
            id: this.editingReminderId
          });
          console.log('提醒已更新');
        } else {
          // 创建新提醒
          await this.createNewReminder(reminderToSave);
          console.log('新提醒已添加');
        }
        
        // 关闭弹窗并重置表单
        this.isDialogVisible = false;
        this.resetForm();
      } catch (error) {
        console.error('保存提醒时出错:', error);
      }
    },
    // 调整过去的日期为下一个有效的提醒时间
    adjustPastDate(dateStr, timeStr, recurrenceType, recurrenceDetails) {
      // 解析日期和时间
      const [hours, minutes] = timeStr.split(':').map(Number);
      const date = new Date(dateStr);
      date.setHours(hours, minutes, 0, 0); // 秒和毫秒固定为0
      
      // 获取当前时间
      const now = new Date();
      
      // 如果设置的时间未过期，直接返回null表示不需调整
      if (date > now) {
        return null;
      }
      
      // 根据不同的重复类型计算下一个有效时间
      switch (recurrenceType) {
        case 'ONCE':
          // 单次提醒：如果过期，设置为明天同一时间
          date.setDate(now.getDate() + 1);
          return date;
          
        case 'DAILY':
          // 每日提醒：如果今天的时间已过，设置为明天同一时间
          date.setDate(now.getDate());
          if (date <= now) {
            date.setDate(date.getDate() + 1);
          }
          return date;
          
        case 'WEEKLY':
          // 每周提醒：找到下一个符合选择的星期几的日期
          if (!recurrenceDetails || !recurrenceDetails.daysOfWeek || recurrenceDetails.daysOfWeek.length === 0) {
            // 如果没有设置星期几，默认为每周今天
            const today = now.getDay();
            date.setDate(now.getDate());
            if (date <= now) {
              date.setDate(date.getDate() + 7); // 下周同一天
            }
            return date;
          }
          
          // 已选择的星期几（0-6，0表示周日）
          const selectedDays = [...recurrenceDetails.daysOfWeek].sort((a, b) => a - b);
          
          // 从今天开始，找到下一个符合的日期
          date.setDate(now.getDate());
          let found = false;
          
          // 最多循环检查未来14天（两周）
          for (let i = 0; i < 14; i++) {
            const dayOfWeek = date.getDay();
            if (selectedDays.includes(dayOfWeek) && date > now) {
              found = true;
              break;
            }
            date.setDate(date.getDate() + 1);
          }
          
          if (!found) {
            // 如果两周内没找到，使用第一个选择的星期几，从下周开始
            const firstSelectedDay = selectedDays[0];
            date.setDate(now.getDate());
            
            // 计算到下一个指定星期几的天数
            let daysUntilNext = (firstSelectedDay - now.getDay() + 7) % 7;
            if (daysUntilNext === 0) daysUntilNext = 7; // 如果今天就是，则取下周
            
            date.setDate(date.getDate() + daysUntilNext);
          }
          
          return date;
          
        case 'MONTHLY_BY_DATE':
          // 每月提醒：计算下一个有相同日期的月份
          if (!recurrenceDetails || typeof recurrenceDetails.dayOfMonth !== 'number') {
            // 如果没有设置日期，使用开始日期的日期部分
            const dayOfMonth = date.getDate();
            
            // 设置为当前月份的指定日期
            date.setDate(1); // 先设为1号，避免月份有大小月的问题
            date.setMonth(now.getMonth());
            date.setDate(Math.min(dayOfMonth, this.getDaysInMonth(date.getFullYear(), date.getMonth())));
            
            // 如果当月的这个日期已过或就是今天，使用下个月
            if (date <= now) {
              date.setDate(1); // 先设为1号，避免月份有大小月的问题
              date.setMonth(date.getMonth() + 1);
              date.setDate(Math.min(dayOfMonth, this.getDaysInMonth(date.getFullYear(), date.getMonth())));
            }
          } else {
            const dayOfMonth = recurrenceDetails.dayOfMonth;
            
            // 设置为当前月份的指定日期
            date.setDate(1); // 先设为1号，避免月份有大小月的问题
            date.setMonth(now.getMonth());
            date.setDate(Math.min(dayOfMonth, this.getDaysInMonth(date.getFullYear(), date.getMonth())));
            
            // 如果当月的这个日期已过或就是今天，使用下个月
            if (date <= now) {
              date.setDate(1); // 先设为1号，避免月份有大小月的问题
              date.setMonth(date.getMonth() + 1);
              date.setDate(Math.min(dayOfMonth, this.getDaysInMonth(date.getFullYear(), date.getMonth())));
            }
          }
          
          return date;
          
        default:
          return null;
      }
    },
    // 获取指定年月的天数
    getDaysInMonth(year, month) {
      return new Date(year, month + 1, 0).getDate();
    },
    async deleteReminder(id) {
      if (confirm('确定要删除这个提醒吗？')) {
        try {
          await this.deleteExistingReminder(id);
          console.log('提醒已删除');
          
          // 如果正在编辑这个提醒，重置表单并关闭弹窗
          if (this.isEditing && this.editingReminderId === id) {
            this.isDialogVisible = false;
            this.resetForm();
          }
        } catch (error) {
          console.error('删除提醒时出错:', error);
        }
      }
    },
    editReminder(reminder) {
      // 设置编辑状态
      this.isEditing = true;
      this.editingReminderId = reminder.id;
      
      // 填充表单数据
      this.newReminder = {
        title: reminder.title,
        description: reminder.description || '',
        reminderTime: reminder.reminderTime,
        recurrenceType: reminder.recurrenceType,
        startDate: reminder.startDate,
        isActive: reminder.isActive
      };
      
      // 处理每周重复选项
      if (reminder.recurrenceType === 'WEEKLY' && reminder.recurrenceDetails && reminder.recurrenceDetails.daysOfWeek) {
        this.selectedDaysOfWeek = [...reminder.recurrenceDetails.daysOfWeek];
      } else {
        this.selectedDaysOfWeek = [];
      }
      
      // 显示弹窗
      this.isDialogVisible = true;
    },
    resetForm() {
      // 重置表单到默认状态
      this.newReminder = {
        title: '',
        description: '',
        reminderTime: this.getCurrentTime(), // 更新为当前时间，精确到分钟
        recurrenceType: 'ONCE',
        recurrenceDetails: {},
        startDate: this.getTodayFormatted(),
        isActive: true
      };
      this.selectedDaysOfWeek = [];
      this.isEditing = false;
      this.editingReminderId = null;
    },
    async toggleReminderActive(reminder) {
      try {
        await this.toggleReminderActiveStatus({
          reminderId: reminder.id,
          isActive: !reminder.isActive
        });
        console.log(`提醒 "${reminder.title}" ${!reminder.isActive ? '已启用' : '已禁用'}`);
      } catch (error) {
        console.error('切换提醒状态时出错:', error);
      }
    },
    formatTime(timeString) {
      // 格式化时间字符串 HH:MM
      if (!timeString) return '';
      
      // 处理时间字符串
      const timeParts = timeString.split(':');
      const hours = timeParts[0] || '00';
      const minutes = timeParts[1] || '00';
      
      return `${hours}:${minutes}`;
    },
    formatDate(timestamp) {
      // 格式化时间戳为可读日期
      if (!timestamp) return '未设置';
      
      const date = new Date(timestamp);
      return date.toLocaleString('zh-CN', {
        year: 'numeric',
        month: '2-digit',
        day: '2-digit',
        hour: '2-digit',
        minute: '2-digit'
      });
    },
    getRecurrenceText(reminder) {
      // 获取重复方式的文本描述
      switch (reminder.recurrenceType) {
        case 'ONCE':
          return '单次';
        case 'DAILY':
          return '每天';
        case 'WEEKLY':
          if (reminder.recurrenceDetails && reminder.recurrenceDetails.daysOfWeek) {
            const days = reminder.recurrenceDetails.daysOfWeek.map(day => {
              return this.daysOfWeek.find(d => d.value === day).label;
            });
            return `每周 (${days.join(',')})`;
          }
          return '每周';
        case 'MONTHLY_BY_DATE':
          if (reminder.recurrenceDetails && reminder.recurrenceDetails.dayOfMonth) {
            return `每月${reminder.recurrenceDetails.dayOfMonth}日`;
          }
          return '每月';
        default:
          return '未知';
      }
    },
    // 获取当前时间（仅精确到分钟）
    getCurrentTime() {
      const now = new Date();
      const hours = String(now.getHours()).padStart(2, '0');
      const minutes = String(now.getMinutes()).padStart(2, '0');
      return `${hours}:${minutes}`;
    },
    // 打开日期选择器
    openDatePicker(event) {
      // 防止在已经点击输入框本身时重复触发
      if (event.target.tagName !== 'INPUT') {
        // 如果点击的不是输入框本身，则手动触发点击
        this.$refs.dateInput.showPicker ? 
          this.$refs.dateInput.showPicker() : // 现代浏览器支持showPicker方法
          this.$refs.dateInput.click(); // 兼容旧版浏览器
      }
    }
  },
  async mounted() {
    try {
      // 加载所有提醒
      await this.fetchAllReminders();
    } catch (error) {
      console.error('获取提醒列表时出错:', error);
    } finally {
      this.isLoading = false;
    }
  }
};
</script>

<style>
/* 提醒视图的样式 */
.reminder-view-content {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: var(--spacing-lg);
  gap: var(--spacing-md);
  background-color: var(--theme-bg-content-area);
  color: var(--theme-text-primary);
  overflow-y: auto;
}

.reminder-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-lg);
  background-color: var(--theme-bg-primary);
  border-radius: var(--border-radius-lg);
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  padding: var(--spacing-base);
}

.reminder-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--spacing-md);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
  padding-bottom: var(--spacing-sm);
}

.reminder-header h2 {
  color: var(--theme-text-primary);
  margin: 0;
}

.add-button {
  display: flex;
  align-items: center;
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-duration-short);
}

.add-button:hover {
  background-color: color-mix(in srgb, var(--theme-accent-primary) 80%, white);
}

.add-icon {
  font-size: 1.2em;
  margin-right: var(--spacing-xs);
}

.reminders-list {
  flex-grow: 1;
}

.reminders-list h3 {
  color: var(--theme-text-primary);
  margin-bottom: var(--spacing-md);
  padding-bottom: var(--spacing-xs);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
}

.loading-message,
.empty-list-message {
  text-align: center;
  padding: var(--spacing-xl);
  color: var(--theme-text-muted);
  font-style: italic;
}

.reminder-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: var(--spacing-md);
}

.reminder-item {
  position: relative; /* 改为相对定位，以支持按钮绝对定位 */
  display: flex;
  flex-direction: column; /* 修改为纵向布局 */
  padding: var(--spacing-base);
  background-color: var(--theme-bg-card);
  border-radius: var(--border-radius-base);
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  transition: background-color var(--transition-duration-short);
  height: 150px; /* 设置固定高度 */
  overflow: hidden; /* 隐藏溢出内容 */
}

.reminder-item:hover {
  background-color: var(--theme-bg-hover);
}

.reminder-content {
  flex-grow: 1;
  min-width: 0;
  overflow: hidden; /* 防止内容溢出 */
  margin-bottom: 40px; /* 为底部状态信息和按钮留出空间 */
}

.reminder-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--spacing-xs);
}

.reminder-title {
  margin: 0;
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-bold);
  color: var(--theme-text-primary);
  white-space: nowrap; /* 防止换行 */
  overflow: hidden; /* 隐藏溢出部分 */
  text-overflow: ellipsis; /* 显示省略号 */
}

.reminder-time {
  font-size: var(--font-size-sm);
  color: var(--theme-accent-secondary);
  font-weight: var(--font-weight-medium);
}

.reminder-description {
  margin: var(--spacing-xs) 0;
  color: var(--theme-text-secondary);
  font-size: var(--font-size-sm);
  max-height: 60px; /* 限制描述的最大高度 */
  overflow: hidden; /* 隐藏溢出部分 */
  display: -webkit-box;
  -webkit-line-clamp: 3; /* 最多显示3行 */
  -webkit-box-orient: vertical;
}

.reminder-details {
  position: absolute; /* 绝对定位 */
  bottom: 10px; /* 距底部10px */
  left: 10px; /* 距左侧10px */
  display: flex;
  align-items: center;
  gap: var(--spacing-md);
  flex-wrap: wrap;
  font-size: var(--font-size-xs);
  color: var(--theme-text-muted);
  max-width: calc(100% - 200px); /* 留出右侧按钮的空间 */
  overflow: hidden; /* 防止内容溢出 */
}

.reminder-recurrence {
  background-color: var(--theme-bg-badge);
  color: var(--theme-text-secondary);
  padding: 2px var(--spacing-xs);
  border-radius: var(--border-radius-sm);
}

.reminder-next {
  white-space: nowrap;
}

.reminder-status {
  padding: 2px var(--spacing-xs);
  border-radius: var(--border-radius-sm);
  background-color: var(--theme-bg-badge-warning);
  color: var(--theme-text-secondary);
}

.reminder-status.active {
  background-color: var(--theme-bg-badge-success);
}

.reminder-actions {
  position: absolute; /* 绝对定位 */
  bottom: 10px; /* 距底部10px */
  right: 10px; /* 距右侧10px */
  display: flex;
  gap: var(--spacing-sm);
}

.edit-button,
.delete-button,
.toggle-button {
  padding: var(--spacing-xs) var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  cursor: pointer;
  font-size: var(--font-size-sm);
  transition: all var(--transition-duration-short);
  max-width: 60px; /* 限制按钮宽度 */
  overflow: hidden; /* 隐藏溢出文本 */
  text-overflow: ellipsis; /* 显示省略号 */
  white-space: nowrap; /* 防止按钮文本换行 */
}

.toggle-button {
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-secondary);
}

.edit-button {
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-secondary);
}

.delete-button {
  background-color: var(--theme-button-danger-bg);
  color: var(--theme-text-on-accent);
  border-color: transparent;
}

.toggle-button:hover,
.edit-button:hover {
  background-color: var(--theme-bg-hover);
}

.delete-button:hover {
  background-color: var(--theme-button-danger-bg-hover);
}

/* 弹窗样式 */
.reminder-dialog-overlay {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.7);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1000;
}

.reminder-dialog {
  background-color: var(--theme-bg-content-area);
  border-radius: var(--border-radius-lg);
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  width: 90%;
  max-width: 500px;
  max-height: 90vh;
  overflow-y: auto;
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.3);
  opacity: 1;
}

.dialog-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--spacing-md) var(--spacing-base);
  background-color: var(--theme-bg-card);
  border-bottom: var(--border-width) var(--border-style) var(--theme-border-primary);
  border-top-left-radius: var(--border-radius-lg);
  border-top-right-radius: var(--border-radius-lg);
}

.dialog-header h3 {
  margin: 0;
  color: var(--theme-text-primary);
}

.close-button {
  background: none;
  border: none;
  font-size: 1.5rem;
  color: var(--theme-text-secondary);
  cursor: pointer;
  padding: 0;
  margin: 0;
  width: 28px;
  height: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  transition: background-color var(--transition-duration-short);
}

.close-button:hover {
  background-color: var(--theme-bg-hover);
}

.add-reminder-form {
  padding: var(--spacing-base);
  background-color: var(--theme-bg-content-area);
}

.form-group {
  margin-bottom: var(--spacing-md);
}

.form-group label {
  display: block;
  margin-bottom: var(--spacing-xs);
  color: var(--theme-text-secondary);
  font-weight: var(--font-weight-medium);
}

.form-row {
  display: flex;
  gap: var(--spacing-md);
  margin-bottom: var(--spacing-sm);
}

.time-group, .date-group {
  flex: 1;
}

/* 表单输入元素样式 */
input[type="text"],
textarea {
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  background-color: var(--theme-bg-input);
  color: var(--theme-text-primary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
}

textarea {
  min-height: 80px;
  resize: vertical;
}

/* 增强日期和时间输入框的样式 */
input[type="date"],
input[type="time"] {
  width: 100%;
  padding: var(--spacing-sm);
  border-radius: var(--border-radius-sm);
  border: var(--border-width) var(--border-style) var(--theme-border-primary);
  background-color: var(--theme-bg-input);
  color: var(--theme-text-primary);
  box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.1);
  cursor: pointer; /* 添加指针光标，提示可点击 */
  font-family: monospace; /* 使用等宽字体以便更好地对齐 */
  position: relative;
}

/* 自定义日期和时间选择器图标 - 跟随主题 */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator {
  opacity: 0.8;
  cursor: pointer;
  filter: var(--theme-icon-filter); /* 使用主题的图标过滤器 */
  background-color: transparent;
  padding: 2px;
  border-radius: 2px;
}

/* 暗色主题特定样式 */
.theme-dark input[type="date"]::-webkit-calendar-picker-indicator,
.theme-dark input[type="time"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="date"]::-webkit-calendar-picker-indicator,
[data-theme="dark"] input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(0.8); /* 在暗色主题中反转图标颜色 */
}

/* 旋转控件样式 */
input[type="date"]::-webkit-inner-spin-button,
input[type="time"]::-webkit-inner-spin-button {
  opacity: 1;
  filter: var(--theme-icon-filter); /* 使用主题的图标过滤器 */
}

/* 鼠标悬停效果 */
input[type="date"]::-webkit-calendar-picker-indicator:hover,
input[type="time"]::-webkit-calendar-picker-indicator:hover {
  background-color: var(--theme-bg-hover);
}

/* Firefox 特定样式 */
@-moz-document url-prefix() {
  input[type="date"], input[type="time"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
    background-repeat: no-repeat;
    background-position: calc(100% - 8px) center;
    background-size: 16px;
    padding-right: 32px;
  }
  
  .theme-dark input[type="date"], 
  .theme-dark input[type="time"],
  [data-theme="dark"] input[type="date"], 
  [data-theme="dark"] input[type="time"] {
    background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="18" rx="2" ry="2"></rect><line x1="16" y1="2" x2="16" y2="6"></line><line x1="8" y1="2" x2="8" y2="6"></line><line x1="3" y1="10" x2="21" y2="10"></line></svg>');
  }
}

/* 聚焦时的样式 */
input[type="date"]:focus,
input[type="time"]:focus {
  outline: none;
  border-color: var(--theme-accent-primary);
  box-shadow: 0 0 0 2px rgba(var(--theme-accent-primary-rgb, 0, 120, 212), 0.2);
}

.recurrence-options {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-md);
}

.radio-label {
  display: flex;
  align-items: center;
  cursor: pointer;
}

.radio-label input[type="radio"] {
  margin-right: var(--spacing-xs);
}

.days-of-week {
  display: flex;
  flex-wrap: wrap;
  gap: var(--spacing-sm);
  margin-top: var(--spacing-xs);
}

.day-checkbox {
  display: flex;
  align-items: center;
  margin-right: var(--spacing-sm);
  cursor: pointer;
}

.day-checkbox input[type="checkbox"] {
  margin-right: var(--spacing-xs);
}

.form-actions {
  display: flex;
  justify-content: flex-end;
  gap: var(--spacing-md);
  margin-top: var(--spacing-md);
}

.save-button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--theme-accent-primary);
  color: var(--theme-text-on-accent);
  border: none;
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: background-color var(--transition-duration-short);
}

.save-button:hover:not(:disabled) {
  background-color: color-mix(in srgb, var(--theme-accent-primary) 80%, white);
}

.save-button:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

.cancel-button {
  padding: var(--spacing-sm) var(--spacing-md);
  background-color: var(--theme-bg-button-secondary);
  color: var(--theme-text-secondary);
  border: var(--border-width) var(--border-style) var(--theme-border-secondary);
  border-radius: var(--border-radius-sm);
  cursor: pointer;
  transition: all var(--transition-duration-short);
}

.cancel-button:hover {
  background-color: var(--theme-bg-hover);
}

/* 适配不同屏幕尺寸 */
@media (max-width: 768px) {
  .form-row {
    flex-direction: column;
    gap: var(--spacing-sm);
  }
  
  .reminder-item {
    flex-direction: column;
    align-items: stretch;
  }
  
  .reminder-actions {
    margin-top: var(--spacing-sm);
    justify-content: flex-end;
  }
  
  .reminder-dialog {
    width: 95%;
    max-height: 95vh;
  }
}

/* 日期输入框包装器 */
.date-input-wrapper {
  position: relative;
  width: 100%;
  cursor: pointer;
}

/* 确保日期输入框填满包装器 */
.date-input-wrapper input[type="date"] {
  width: 100%;
  position: relative;
  z-index: 1;
  cursor: pointer;
}
</style> 